<!--餐饮分类管理-->
<template>

	<div id="luxuryGoodsManagerCategory" class="container-fluid">

		<div>
			
			<el-row :gutter="20">
			  <el-col :span="6">
			  		<div class="grid-content bg-purple">
						<div class="panel panel-primary">
					      <div class="panel-heading">
					        <h3 class="panel-title">餐饮分类</h3>
					      </div>
					      <div class="panel-body">
					      		<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
					      </div>
					    </div>
			  		</div>
			  </el-col>
			  <el-col :span="17">
			  		<div class="grid-content bg-purple">
			  			<div class="panel panel-primary">
					      <div class="panel-heading">
					        <h3 class="panel-title">属性</h3>
					      </div>
					      <div class="panel-body">
													       
								<el-form ref="form"  label-width="80px">
								  <el-form-item label="名称">
								    <el-input v-model="node.label"></el-input>
								  </el-form-item>
									

								  <!--
									  <el-form-item label="是否有效">
									    <el-radio-group v-model="node.type">
									      <el-radio :label="false">无效</el-radio>
									      <el-radio :label="true">有效</el-radio>
									    </el-radio-group>
									  </el-form-item>
									-->
								  <el-form-item>
								    <el-button type="primary" @click="onSave">保存</el-button>
								    <el-button type="success" v-if="node.level<3" @click="addNode">添加子分类</el-button>
								    <el-button type="danger" v-if="node.level>1" @click="deleteNode">删除该分类</el-button>
								  </el-form-item>

								</el-form>

					      </div>
					    </div>
			  		</div>
			  </el-col>
	
			</el-row>


		</div>


	</div>

		
</template>

<script>
  import axios from 'axios'
  export default{
  	data () {
  		return {
  			treedata:[],
  			defaultProps:{
  				 children: 'children',
         		 label: 'label',
         		 id: 'id',
         		 pid: 'pid',
         		 level: 'level'
  			},
  			node: {
  				label: '',
         		id: 0,
         		pid: 'pid',
         		level: 1,
         		type: true //是否有效
  			}

  		}
  	},
  	mounted () {
  		// 初始化
  		this.getCatoryData();
  	},
  	methods: {
  		// 初始化treeData
  		getCatoryData(){
  			axios.post("/api/category/getCategoryListByPage",{pageSize:10000}).then((res) => {
  				 if (res.data.code === 9999) {
            		let treedata=res.data.data.categoryList;
            		let node1=[];
            		let node2=[];
            		let node3=[];
            		let node4=[];

            		for( let i in treedata){
            			let nodeData=treedata[i]
            			let node={};
            			node.label=nodeData.name;
            			node.children=[];
            			node.level=nodeData.level;
            			node.id=nodeData.id;
            			node.pid=nodeData.pid;
            			node.type=nodeData.type;
            			switch(node.level){
            				case 1:
	            				if(node.label=='餐饮')
            						node1.push(node);
            					break;
            				case 2:
            					node2.push(node);
            					break;
            				case 3:
            					node3.push(node);
            					break;
            				case 4:
            					node4.push(node);
            					break;
            				default:
            					console.error("未知的菜单级别:"+node.level);		
            			}

            		}
        			//封装tree
        			for(let i1 in node1){
        				let node11=node1[i1]
        			
        				for(let i2 in node2){
        					let node22=node2[i2]
        					if(node11.id==node22.pid){
        						node11.children.push(node22);
        						for(let i3 in node3){
	        						let node33=node3[i3]
	        						if(node22.id==node33.pid){
	        							node22.children.push(node33);
	        							for (let i4 in node4){
		        							let node44=node4[i4];
		        							if(node33.id==node44.pid){
		        								//node33.children.push(node44);
		        							}
	        							}
	        						}
	        						
        						}
        					}
        				
        				}
        			}
        		this.treedata=node1;
        		console.info(node1);
          		}
  			});
  		},
  	 	handleNodeClick(data) {
        this.node=data;
        console.info(this.node);
      },
      onSave(){
      	//保存信息
      },
      addNode(){
	      	this.$prompt('请输入分类名称', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          inputPattern: /^\S{2,10}$/,
	          inputErrorMessage: '格式不正确'
	        }).then(({ value }) => {

	          this.$message({
	            type: 'success',
	            message: '你添加的分类是: ' + value
	          });
	          var param={};
	          param.name=value;
	          param.pid=this.node.id;
	          param.level=this.node.level+1;
	          axios.post('/api/category/addCategory',param).then((res) => {
	          	console.info(res);
	          	param.label=param.name;
	          	this.node.children.push(param);
	          }, (res) => {});

	        }).catch((e) => {
	        	console.error(e);
	          this.$message({
	            type: 'info',
	            message: '取消输入'
	          });       
	        });
	      }



      }
  	}
  

</script>

<style lang="less" scoped>

</style>